<template>
    <div class="orders">
        <div class="orderTop">
            <div @click="$router.go(-1)" class="ic">
                <van-icon name="arrow-left" />
            </div>
            <div class="btns">
                <button @click="change()" :class="{ active: start==false }">我的订单</button>
                <button @click="change()" :class="{ active: start==true }">其他订单</button>
            </div>
            <div  class="search">
                <img v-show="start == false" src="" alt="">
                <van-icon name="wap-nav" />
            </div>
        </div>
        <div class="conent">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            start: false
        }
    },
    methods: {
        change() {
            this.start = !this.start
            if (this.start) {
                this.$router.push('/Orders/Other')
            } else {
                this.$router.push('/Orders/Myorder')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.orders{
    .orderTop{
        display: flex;
        height: 0.45rem;
        align-items: center;
        background-color: #ffffff;
        .ic{
            font-size: 0.15rem;
            margin-left:0.22rem ;
            margin-right: 0.33rem;
        }
        .search{
            width: 0.7125;
            height: 100%;
            display: flex;
            align-items: center;
            margin-left: 0.24rem;
            img{
                width: 0.3rem;
                height: 0.3rem;
                margin-right: 0.22rem;
            }
            .van-icon{
                font-size: 0.15rem;
            }
        }
        .btns{
            font-size: 0.13rem;
            button{
                width: 0.825rem;
                height: 0.27rem;
                border-radius: 0.09rem;
                border: 1px solid #ffcc00;
                
            }
            .active {
                background-color: #fcca00;
            }
        }
    }
}
</style>